<template>
  <div>
    <div class="header">
      <div class="title"><text>学员管理</text></div>

      <el-button type="primary" class="el-icon-circle-plus-outline" size="small" style="margin-left: 40px;"
        @click="dialogFormVisible = true">添加学员
      </el-button>
      <el-button type="primary" class="el-icon-circle-plus" size="small" @click="insert">添加排课
      </el-button>
      <el-button type="danger" class="el-icon-delete" size="small" @click="xuenamedelete">删除</el-button>
      <input v-model="queryform.name" placeholder=" 输入学员名称" type="text" style="height: 28px;
       border: 1px solid #999; border-right: none; margin-left: 30px; width: 250px; background-color: rgba(0, 0, 0, 0.0);">
      <button class="el-icon-search"
        style="border: 1px solid #999; border-left: none; height: 30px; width: 40px;" @click="getxuenamelist"></button>
    </div>
    <el-card class="box-card" style="height: 100%;">
      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="name" label="学员姓名" width="180">
           
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="180">
          <template v-slot:default="scope">
                {{scope.row.sex ? '男':'女'}}  
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="生日">
        </el-table-column>
        <el-table-column prop="age" label="年龄">
        </el-table-column>
        <el-table-column prop="addtime" label="入学时间">
        </el-table-column>
        <el-table-column prop="stateName" label="状态">
        </el-table-column>
        <el-table-column prop="" width="320" label="课时消耗"> 
            <template v-slot:default="scope">
                <div v-for="item in scope.row.orderList" :key="item.id">
                  <el-progress style="margin-top:3%;"   :percentage="item.consumed/item.coursecounts" status="warning">{{item.courseName}}</el-progress>
                </div>
            </template>
        </el-table-column>
        <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template #default="scope">
          <el-button type="text" size="small" @click="courses(scope.row)">购课</el-button>
          <el-button type="text" size="small" @click="gogo(scope.row)" >记录</el-button>
          <el-button type="text" size="small" @click="updatea(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="kebiao(scope.row)">课表</el-button>
          <el-button type="text" size="small"  @click="deletefind(scope.row)">删除</el-button>
        </template>
      </el-table-column>
       
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryform.page" :page-sizes="[1, 5, 10, 100]" :page-size="queryform.psize"
        layout="total, sizes, prev, pager, next, jumper" :total="counts">
      </el-pagination>
    </el-card>
  </div>
  <!-- 添加排课 -->
  <el-dialog title="添加排课" width="80%" v-model="getdialogFormVisible">
    <el-tabs  v-model="activeName" type="card" :before-leave="noe">

      <el-tab-pane  label="插班排课" name="second">
          <div style="width: 100%; height: 50px;  display: flex; align-items: center;">
            <input v-model="backs.name" placeholder=" 输入班级名称" type="text" style="border: 1px solid rgb(243, 243, 243); width: 250px; height: 30px;">
            <button  class="el-icon-search" style="border: 1px solid rgb(243, 243, 243); width: 37px; height: 32px;" @click="bnum"></button>
          </div>
          <div style="width: 100%; height: 100%;">
            <el-table
            :data="datax"
            style="width: 100%">
            <el-table-column width="27px">
               <template v-slot:default="scope">       
                    <input type="radio" name="classid" @change="radios(scope.row)">
               </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="班级名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="coursename"
              label="课程"
              width="180">
            </el-table-column>
             <el-table-column
                prop="teacherslist"
              label="老师">
             </el-table-column>
             <el-table-column
             prop="coursecounts"
             label="人数"
             width="180">
             </el-table-column>
             <el-table-column
             prop="endcourses"
             label="计划课时"
              width="180">
            </el-table-column>
            <el-table-column
            prop="schcourses"
            label="已排课时"
            width="180">
            </el-table-column>
            <el-table-column
            prop="students"
            label="已上课时"
            width="180">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="">
              <span>课表</span>
            </template>
          </el-table-column>
            </el-table>
            </div>
           <div @click="paike" style="width: 10%; height:50px; display: flex; justify-content: center; align-items: center; background-color: cornflowerblue; margin-left: 85%; margin-top: 20px; border-radius: 10px;">
              <div style="font-size: 20px; color: #fff;">保存</div>  
           </div>
          </el-tab-pane>

      <el-tab-pane   label="一对一排课"  name="first" @click="noe">
       <!-- 一对一排课 -->
          <div style="width: 65%;">
            <el-form :label-position="labelPosition" :model="formnoe">
                <div style="width: 25%; height: 80px;">
                  <el-form-item label="签约课程" size="small">
                    <el-select  style="width:90%;" v-model="formnoe.courseid" placeholder="请选择">
                      <el-option v-for="item in qanuelist" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div style=" display: flex; width: 100%; margin-top: 20px; height:80px;">
                   <div style="width: 25%; height: 100%; ">
                    <div style="display: flex;justify-content: center; align-items: center; width: 100%; height: 50%;">
                       <span>主讲老师&nbsp;</span>
                       <span style="color: deepskyblue;" @click="zhujiao">&nbsp;添加助教</span>
                    </div>
                    <div style="width: 100%; height: 50%;">
                    <el-form-item label="" size="small">
                      <el-select style="width:90%;" v-model="formnoe.teacherid" placeholder="请选择">
                        <el-option v-for="item in tercherlistdo" :key="item.id" :label="item.name" :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                   </div>
                   </div>
                   <div v-show="zhujiaos" style="width: 25%; height: 100%;">
                    <el-form-item label="助教老师" size="small">
                      <el-select style="width:90%;" v-model="formnoe.assistant" placeholder="请选择">
                        <el-option v-for="item in tercherlist" :key="item.id" :label="item.name" :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                   </div>
                   <div style="width: 25%; height: 100%;">
                    <el-form-item label="教室" size="small">
                      <el-select style="width:90%;" v-model="formnoe.classrooms" placeholder="请选择">
                        <el-option v-for="item in tratelistdo" :label="item.name" :value="item.id" :key="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                   </div>
                   <div style="width: 25%; height: 100%;">
                    <el-form-item label="单节课扣学员课时" size="small">
                        <el-input size="small" v-model="formnoe.pricecounts" style="width: 90%;"></el-input>
                    </el-form-item>
                  </div>
                </div>
                <!-- 单/批排课 -->
                <div style="margin-top: 20px; width: 30%; background-color: dimgrey; height: 30px;">
                  <el-menu mode="horizontal" :default-active="activeIndex">
                    <el-menu-item index="1" @click="dan">单次排课</el-menu-item>
                    <el-menu-item index="2" @click="pl">批量排课</el-menu-item>
                  </el-menu>
                </div>
                <div style=" display: flex; margin-top: 35px; width: 100%; height: 90px;">
                   <div style="width: 25%; height: 100%;">
                    <el-form-item label="开课日期">
                      <el-col :span="11">
                        <el-date-picker size="small" v-model="formnoe.begindate" type="date"  format="YYYY-MM-DD"  value-format="YYYY-MM-DD" placeholder="选择日期" style="margin-left: 10px; width:175px;"></el-date-picker>
                      </el-col>
                    </el-form-item>
                   </div>
                   <div v-show="plshow" style="display: flex; margin-left: 10%; width: 55%; height: 100%;">
                     <div style="width: 50%; height: 100%;">
                      <el-form-item label="节课方式">
                        <el-radio-group  v-model="formnoe.jsfs">
                          <el-radio label="按课节" @change="key">按课节</el-radio>
                          <el-radio label="按日期" @change="date">按日期</el-radio>
                        </el-radio-group>
                      </el-form-item>
                     </div>
                     <div v-show="bba" style="width: 50%; height: 100%;">
                      <el-form-item label="排课总数">
                        <el-input size="small" v-model="formnoe.coursescount" style="width: 90%;"></el-input>
                      </el-form-item>
                     </div>
                     <div v-show="aab" style="width: 50%; height: 100%;">
                      <el-form-item label="结课日期">
                        <el-col :span="11">
                          <el-date-picker size="small" v-model="formnoe.enddate" type="date"  format="YYYY-MM-DD"  value-format="YYYY-MM-DD" placeholder="选择日期" style="margin-left: 10px; width:175px;"></el-date-picker>
                        </el-col>
                      </el-form-item>
                     </div>
                   </div>
                </div>
                <div v-show="xingqi" style="margin-top: 20px; width: 100%; height: 40px;">
                  <div style="display: flex;"><span>星期选择</span></div>
                  <div style="display: flex;">
                  <el-form-item label="">
                    <el-checkbox-group v-model="week">
                      <el-checkbox label="1" @change="sunday" name="type">星期日</el-checkbox>
                      <el-checkbox label="2" @change="Monday" name="type">星期一</el-checkbox>
                      <el-checkbox label="3" @change="Tuesday" name="type">星期二</el-checkbox>
                      <el-checkbox label="4" @change="Wednesday" name="type">星期三</el-checkbox>
                      <el-checkbox label="5" @change="Thursday" name="type">星期四</el-checkbox>
                      <el-checkbox label="6" @change="Friday" name="type">星期五</el-checkbox>
                      <el-checkbox label="7" @change="Saturday" name="type">星期六</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </div>
                </div>
                <div  v-show="shangke" style="margin-top: 20px; width: 40%; height: 80px;">
                  <el-form-item label="上课时间" size="small">
                    <el-col :span="11" size="small">
                      <el-time-select v-model="begintime8"  placeholder="选择时间" format="HH:mm:ss" style="width: 100%;"></el-time-select>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                      <el-time-select  placeholder="选择时间"  v-model="endtime8" format="HH:mm:ss" style="width: 100%;"></el-time-select>
                    </el-col>
                  </el-form-item>
                </div>
                <div class="classes"  style=" margin-top: 20px; ">
                 <div v-show="weeks.weekri" class="class-chali">
                   <div style="height: 40%; display: flex; align-items: center;"><span>周日时间</span></div>
                    <el-form-item  style="display:flex;" label="">
                    <el-col :span="11">
                      <el-time-select  size="small" v-model="begintime1" format="HH:mm:ss" placeholder="选择时间"  style="width: 100%;"></el-time-select>
                    </el-col>
                    <el-col :span="11">
                      <el-time-select size="small" v-model="endtime1" format="HH:mm:ss" placeholder="选择时间"   style=" width: 100%;"></el-time-select>
                    </el-col>
                  </el-form-item>
                 </div>
                 
                 <div v-show="weeks.weekyi" class="class-chali"  >
                  <div style="height: 40%; display: flex; align-items: center;"><span>周一时间</span></div>
                  <el-form-item  style="display:flex;" label="">
                  <el-col :span="11">
                    <el-time-select  size="small" v-model="begintime2" format="HH:mm:ss" placeholder="选择时间"  style="width: 100%;"></el-time-select>
                  </el-col>
                  <el-col :span="11">
                    <el-time-select  size="small" v-model="endtime2" format="HH:mm:ss" placeholder="选择时间"  style=" width: 100%;"></el-time-select>
                  </el-col>
                </el-form-item>
                 </div>

                <div v-show="weeks.weeker" class="class-chali" >
                  <div style="height: 40%; display: flex; align-items: center;"><span>周二时间</span></div>
                  <el-form-item  style="display:flex;" label="">
                  <el-col :span="11">
                    <el-time-select  size="small" v-model="begintime3" format="HH:mm:ss" placeholder="选择时间"  style="width: 100%;"></el-time-select>
                  </el-col>
                  <el-col :span="11">
                    <el-time-select  size="small" v-model="endtime3" format="HH:mm:ss" placeholder="选择时间"  style=" width: 100%;"></el-time-select>
                  </el-col>
                </el-form-item>
                </div>

                <div v-show="weeks.weeksan" class="class-chali"  >
                  <div style="height: 40%; display: flex; align-items: center;"><span>周三时间</span></div>
                    <el-form-item  style="display:flex;" label="">
                    <el-col :span="11">
                      <el-time-select  size="small" v-model="begintime4" format="HH:mm:ss" placeholder="选择时间"  style="width: 100%;"></el-time-select>
                    </el-col>
                    <el-col :span="11">
                      <el-time-select  size="small" v-model="endtime4" format="HH:mm:ss" placeholder="选择时间"  style=" width: 100%;"></el-time-select>
                    </el-col>
                  </el-form-item>
                </div>

                <div v-show="weeks.weeksi" class="class-chali"  >
                  <div style="height: 40%; display: flex; align-items: center;"><span>周四时间</span></div>
                  <el-form-item  style="display:flex;" label="">
                  <el-col :span="11">
                    <el-time-select size="small" v-model="begintime5" format="HH:mm:ss" placeholder="选择时间"  style="width: 100%;"></el-time-select>
                  </el-col>
                  <el-col :span="11">
                    <el-time-select  size="small" v-model="endtime5" format="HH:mm:ss" placeholder="选择时间"  style=" width: 100%;"></el-time-select>
                  </el-col>
                </el-form-item>
                </div>

                <div v-show="weeks.weekwu" class="class-chali"  >
                  <div style="height: 40%; display: flex; align-items: center;"><span>周五时间</span></div>
                    <el-form-item  style="display:flex;" label="">
                    <el-col :span="11"> 
                      <el-time-select  size="small"  v-model="begintime6" format="HH:mm:ss" placeholder="选择时间"  style="width: 100%;"></el-time-select>
                    </el-col>
                    <el-col :span="11">
                      <el-time-select size="small" v-model="endtime6" format="HH:mm:ss" placeholder="选择时间"  style=" width: 100%;"></el-time-select>
                    </el-col>
                  </el-form-item>
                </div>

                <div v-show="weeks.weekliu" class="class-chali"  >
                  <div style="height: 40%; display: flex; align-items: center;"><span>周六时间</span></div>
                  <el-form-item  style="display:flex;" label="">
                  <el-col :span="11">
                    <el-time-select  size="small" v-model="begintime7" format="HH:mm:ss" placeholder="选择时间"  style="width: 100%;"></el-time-select>
                  </el-col>
                  <el-col :span="11">
                    <el-time-select  size="small" v-model="endtime7" format="HH:mm:ss" placeholder="选择时间"  style=" width: 100%;"></el-time-select>
                  </el-col>
                </el-form-item>
                </div>

          </div>
            </el-form>
          </div>
          <div @click="noenoe" style="width: 10%; height:50px; display: flex; justify-content: center; align-items: center; background-color: cornflowerblue; margin-left: 85%; margin-top: 20px; border-radius: 10px;">
            <div style="font-size: 20px; color: #fff;">保存</div>  
         </div>
      </el-tab-pane>
    </el-tabs>
    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button @click="getdialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="paike">确定</el-button>
      </span>
    </template> -->
  </el-dialog>
  <!-- 修改 -->
  <el-dialog title="修改学员" v-model="dialogFormVisibleupdate">
    <el-form ref="forma"  :model="update">

      <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
        <el-input v-model="update.name" style="margin-right: 150px; width: 300px;" size="small" autocomplete="off">
        </el-input>
      </el-form-item>

      <el-form-item label="联系方式" prop="tel" :label-width="formLabelWidth">
        <el-input v-model="update.tel" style="margin-right: 177px; width: 300px;" size="small" autocomplete="off">
        </el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="update.sex" style="margin-right: 347px;">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="活动时间" required>
        <el-col :span="11">
          <el-form-item prop="birthday">
            <el-date-picker type="date" placeholder="选择日期" v-model="update.birthday" format="YYY-MM-DD"
              value-format="YYYY/MM/DD" style="margin-left: 48px; width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="学员编号" prop="num" :label-width="formLabelWidth">
        <el-input v-model="update.num" style="margin-right: 177px; width: 300px;" size="small" autocomplete="off">
        </el-input>
      </el-form-item>

      <el-form-item label="备注" prop="remarks">
        <el-input type="textarea" v-model="update.remarks" style="margin-right: 150px; width: 300px;"></el-input>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisibleupdate = false">取 消</el-button>
        <el-button type="primary" @click="updatesx('forma')">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 添加 -->
  <el-dialog title="添加学员" v-model="dialogFormVisible">
    <el-form ref="additemform" :rules="rules" :model="additemform">

      <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
        <el-input v-model="additemform.name" style="margin-right: 150px; width: 300px;" size="small" autocomplete="off">
        </el-input>
      </el-form-item>

      <el-form-item label="联系方式" prop="tel" :label-width="formLabelWidth">
        <el-input v-model="additemform.tel" style="margin-right: 177px; width: 300px;" size="small" autocomplete="off">
        </el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="additemform.sex" style="margin-right: 347px;">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="出生日期" required>
        <el-col :span="11">
          <el-form-item prop="birthday">
            <el-date-picker type="date" placeholder="选择日期" v-model="additemform.birthday" format="YYYY-MM-DD"
              value-format="YYYY/MM/DD" style="margin-left: 78px; width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="学员编号" prop="num" :label-width="formLabelWidth">
        <el-input v-model="additemform.num" style="margin-right: 177px; width: 300px;" size="small" autocomplete="off">
        </el-input>
      </el-form-item>

      <el-form-item label="备注" prop="remarks">
        <el-input type="textarea" v-model="additemform.remarks" style="margin-right: 150px; width: 300px;"></el-input>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="xuenameinsert('additemform')">确 定</el-button>
      </span>
    </template>

  
  
  
  </el-dialog>
  <!-- 购课 -->
  <el-dialog title="购课" width="60%" v-model="dialogFormVisiblegou">
     <el-form  :model="numbers" :label-position="labelPosition">
        <div style="display: flex; width: 75%; height: 100px;">
           <div style="flex:1;">
            <el-form-item label="合约类型">
              <el-radio-group v-model="numbers.ordertype">
                <el-radio label="课时卡"></el-radio>
                <el-radio label="时段卡"></el-radio>
              </el-radio-group>
            </el-form-item>
           </div>
           <div style="flex:1; ">
             <el-form-item label="签约日期">
                <el-date-picker size="small" format="YYY年MM月dd日" value-format="YYYY-MM-DD" v-model="numbers.beigindate" type="date" placeholder="选择日期"  style="width: 80%;"></el-date-picker>
             </el-form-item>
           </div>
           <div style="flex:1;">
            <el-form-item label="结束日期">
              <el-date-picker size="small" format="YYY年MM月dd日" value-format="YYYY-MM-DD" v-model="numbers.enddate" type="date" placeholder="选择日期"  style="width: 80%;"></el-date-picker>
           </el-form-item>
           </div>
        </div>
        <div style="display: flex; width: 100%; height: 100px;">
            <div style="flex:1; ">
              <el-form-item label="签约课程">
                <el-select placeholder="请选择" v-model="numbers.courseid" size="small" style="width: 80%;">
                  <el-option v-for="item in booklist" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="flex:1;">
              <el-form-item size="small"  style="margin-top: 4%;" label="课时数">
                <el-input style="width: 80%;" v-model="numbers.coursecounts" type="Number" @blur="cour"></el-input>
              </el-form-item>
            </div>
            <div style="flex:1;">
              <el-form-item size="small" style="margin-top: 4%;" label="课程单价">
                <el-input style="width: 80%;" v-model="numbers.price" type="Number" @blur="cour"></el-input>
              </el-form-item>
            </div>
            <div style="flex:1;">
              <el-form-item size="small" style="margin-top: 4%;" label="课程金额">
                <el-input style="width: 80%;" v-model="numbers.sumprice" type="Number"></el-input>
              </el-form-item>
            </div>
        </div>
        <div style="display: flex; width: 100%; height: 100px;">
          <div style="flex:1;  ">

            <el-form-item label="折扣方式">
              <el-radio-group v-model="numbers.discounttype">
                <el-radio @change="numbersb" label="直减"></el-radio>
                <el-radio @change="numbersbdo" label="折扣"></el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-show="numbershowdo" style="flex:1;">
            <el-form-item label="优惠折扣" size="small">
              <el-input v-model="numbers.discountper"   @blur="Dis" style="width: 80%;"></el-input>%
            </el-form-item>
          </div>
          <div v-show="numbershow" style="flex:1;">
            <el-form-item label="优惠金额" size="small">
              <el-input v-model="numbers.discountprice" @blur="Dis" style="width: 80%;"></el-input>
            </el-form-item>
          </div>
          <div style="flex:1; ">
            
          </div>
          <div style="flex:1; ">
            
          </div>
      </div>
      <div style="width: 50%; height: 100px; ">
        <el-form-item label="备注">
          <el-input v-model="numbers.remarks" type="textarea"></el-input>
        </el-form-item>
      </div>
     </el-form>   
     <div style="width: 100%; border-top: 2px solid rgb(235, 233, 233); height: 10px; margin-top: 20px; ">
      
     </div>
     <template #footer>
      <span>
        <div style="display: flex; align-items: center; font-size: 18px; width: 400px; height: 30px;">
           <span style="flex: 1; display: flex; justify-content: center;"><span style="font-weight: bold;">总金额：</span><span style="color: red;">￥{{count}}</span></span>
           <span style="flex: 1; display: flex; justify-content: center;"><span style="font-weight: bold;">已优惠：</span><span style="color: red;">￥{{Discount}}</span></span>
        </div>
        <el-button @click="dialogFormVisiblegou = false">取 消</el-button>
        <el-button type="primary" @click="butnumber">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 记录 -->
  <el-dialog title="购课记录" width="60%" v-model="dialogTableVisiblegogo">
    <el-table :data="gridData">
      <el-table-column property="studentName" label="学生姓名" width="320"></el-table-column>
      <el-table-column property="courseName" label="课程名称" width="220"></el-table-column>
      <el-table-column property="ordertype" label="课程类型" width="220"></el-table-column>
      <el-table-column property="price" label="价格" width="100"></el-table-column>
    </el-table>
  </el-dialog>
  <!-- 课表 -->
  <el-dialog title="课表" width="90%"  v-model="dialogFormVisiblebiao">
    <div style="width: 100%; display: flex; justify-content: space-between;">
     <div class="left" style="border-radius: 10px; height: 650px; width: 23%; background-color: #fff;">
      <!-- 班级名称 -->
         <div class="left-title" style="width: 100%; height: 7.5%; background-color: #1890ff; border-top-left-radius: 10px; border-top-right-radius: 10px;">
            <span style="margin-left: 5%; color: #fff;">{{班级}}</span>
         </div>
         <!-- 学员详情信息 -->
         <div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 55%; background-color: rgb(250, 250, 250);">
             <div style="width: 90%; height: 90%;">
                 <div style="width: 100%; display: flex; align-items: center; justify-content: space-between; height: 20%;">
                    <div style="width: 15%; height: 60%; background-color: #1890ff;"><img src="" alt=""></div>
                    <div style=" width: 82%; height: 60%; display: flex; align-items: center;">{{kebiaolist.name}}</div>
                 </div>
                 <div style="width: 100%; height: 10%;display: flex; align-items: center;">
                   <div style="display: flex; align-items: center; width: 14%; height: 100%; ">状态 :</div>
                   <div class="admi" style="
                     border-radius: 5%;
                     border: 1px solid rgb(223, 223, 223); 
                     margin-left: 3%; width: 19%;height: 70%; 
                     background-color: rgb(235, 235, 235);
                     display: flex; justify-content: center; align-items: center;"
                     ><span style="font-size: 8px;">{{kebiaolist.stateName}}</span></div>
                 </div>
                 <div style=" display: flex;justify-content: space-between; width: 100%; height: 10%;">
                  <div style="display: flex; align-items: center; width: 25%; height: 100%;">学员编号 :</div>
                  <div style="width: 72%; height: 100%; display: flex; align-items: center;">{{kebiaolist.num}}</div>
                 </div>
                 <div style="width: 100%; height: 10%; display: flex; justify-content: space-between;">
                  <div style="display: flex; align-items: center; width: 20%; height: 100%; ">手机号 :</div>
                  <div style="width: 77%; height: 100%; display: flex; align-items: center; ">{{kebiaolist.tel}}</div>
                 </div>
                 <div style="width: 100%; height: 10%; display: flex; justify-content: space-between;">
                  <div style="display: flex; align-items: center; width: 15%; height: 100%; ">性别 :</div>
                  <div style="width: 82%; height: 100%; display: flex; align-items: center;">{{kebiaolist.sex}}</div>
                 </div>
                 <div style="width: 100%; height: 10%; display: flex; justify-content: space-between;">
                  <div style="display: flex; align-items: center; width: 15%; height: 100%; ">生日 :</div>
                  <div style="width: 82%; height: 100%; display: flex; align-items: center;">{{kebiaolist.birthday}}</div>
                 </div>
                 <div style=" display: flex;justify-content: space-between; width: 100%; height: 10%;">
                  <div style="display: flex; align-items: center; width: 25%; height: 100%; ">入学时间 :</div>
                  <div style="width: 72%; height: 100%; display: flex; align-items: center; ">{{kebiaolist.addtime}}</div>
                 </div>
                 <div style="width: 100%; height: 10%;display: flex; align-items: center;">
                  12
                 </div>
             </div>
         </div>
         <!-- 课表详情 -->
         <el-dialog title="课程详情" width="70%"  v-model="dialogTableVisiblelistget">
               <div style="width: 100%; height: 100px; ">
                  <div style="display: flex;  align-items: center; font-weight: bold; font-size: 20px; width: 100%; height: 50%;">基本信息</div>
                  <div style="display: flex; width: 100%; height: 50%;">
                      <div style="display: flex; align-items: center; font-size: 15px; width: 15%;">课程名称:</div>
                      <div style="display: flex; align-items: center;  font-size: 15px; width: 15%;">主讲老师:</div>
                      <div style="display: flex; align-items: center;  font-size: 15px; width: 15%;">助教老师:</div>
                      <div style="display: flex; align-items: center;  font-size: 15px; width: 15%;">教室:</div>
                  </div> 
              </div>
              <div style="width: 100%; height: 100px; margin-top: 50px;">
                 <div style="width: 100%; height: 50%; display: flex; font-size :20px; font-weight: bold;">上课时间</div>
                 <div style="width: 100%; display: flex; height: 50%;">
                    <div style="width: 20%; height: 100%; display: flex ;align-items: center; ">2017年2月22日(周四)</div>
                    <div style="width: 20%; height: 100%; display: flex; align-items: center;" >18:20:40</div>
                 </div>
              </div>
              <div style="width: 100%; height: 200px; margin-top: 30px;">
                 <div style="display: flex; align-items: center; width: 100%; height: 20%;">
                    <div >学员(0)</div>
                    <div style="margin-left: 20%;" class="el-icon-user-solid">添加学员</div>   
                 </div>
                 <div style="width: 100%; height: 80%;">
                 
                 </div>
              </div>
         </el-dialog>
         <!-- 购买课程 -->
         <div style="width: 100%; height: 20%; margin-top: 5%; border-radius: 10px; background-color: rgb(250, 250, 250);">
            <div style="margin-left: 3%; width: 90%; height: 25%; display: flex; align-items: center;"> 购买课程</div>
            <div style="width: 100%; height: 60%;"></div> 
        </div>
        </div>

     <div class="right">
      <el-tabs style="margin-top: 2%;" v-model="activeName">
        <el-tab-pane label="单次排课" name="second">
           <div style=" width: 100%; height: 100%; background-color: darkgoldenrod;">
            <el-calendar v-model="value"  v-loading="loading" element-loading-text="请稍等..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.1),red">
              <template #dateCell="data">
                <div style="text-align: center; font-size: 17px;">
                  {{data.data.day.substr(8,2)}}
                  <div v-for="item in backlist" :key="item.id" @click="listgetlist(item)" style="margin-top: 10px;">
                       <div v-if="item.coursedate==data.data.day" style="display: flex; width: 100px;border-radius: 3px; height: 50px; background-color: rgb(247, 247, 247);">
                           <div style="width: 7%; border-top-left-radius: 3px; border-bottom-left-radius: 3px; height: 100%; background-color: cornflowerblue;"></div>
                           <div style="width: 90%; margin-left: 3%; height: 100%;">
                              <div style="display: flex; align-items: center; width: 100%; height: 50%;  font-size: 12px; ">{{item.coursename}}</div>
                              <div style="display: flex; width: 100%; height: 50%;">
                                <div style="width: 50%; height: 100%; display: flex; align-items: center; font-size: 12px;">{{item.endtime.substr(11,5)}}</div>
                                <div style="width: 50%; height: 100%; display: flex; align-items: center; font-size: 12px; ">{{item.teachername}}</div>
                              </div>
                           </div>
                      </div>
                  </div>
                </div>
              </template>
            </el-calendar>
           </div>
        </el-tab-pane>
        <el-tab-pane label="批量排课" name="first ">啥也没有...</el-tab-pane>
      </el-tabs>
     </div>
  </div>
  <template #footer>
    <!-- <span class="dialog-footer">
      <el-button @click="dialogFormVisiblebiao = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisiblebiao = false">确 定</el-button>
    </span> -->
  </template>
</el-dialog>

</template>
<script>
  export default {
    data() {
      return {
        // oo:false,
        loading:true,
        backlist:[],
        queryform: {
          page: 1,
          psize: 10,
          name:''
        },
        counts: 0,
        additemform: {
          sex: '',
          name: '',
          birthday: '',
          num: '',
          tel: '',
          remarks: ''
        },
        tableData: [],
        kebiaolist:[],
        studentid:'',//学生ID
        listget:[],//课表详情
        gridData:[],//购课记录
        datax:[],
        backs:{
          name:''
        },
        //
        zhujiaos:false,//助教老师show
        plshow:false,//批量排课
        xingqi:false,//星期
        shangke:true,//上课时间
        bba:true,//排课总数
        aab:false,//节课日期
        activeIndex:'1',//默认单词排课
        activeName:'second',//默认插班排课
        radio:'',
        type:[],
        weeks:{
          weekri:false,//周日
          weekyi:false,//周一
          weeker:false,//周二
          weeksan:false,//周三
          weeksi:false,//周四
          weekwu:false,//周五
          weekliu:false,//周六
        },
        formnoe:{//一对一排课
          studentid:'',//学员DI
          classid:'',//班级ID
          courseid:'',//课程ID
          teacherid:'',//主讲老师ID
          assistant:'',//助教老师ID
          classrooms:'',//教室ID
          pricecounts:'1',//扣学员课时
          coursescount:'',//排课总数
          studentlist:'',//学员列表
          weektime:[],
          // enddate:'',
          addtype:'',
          jsfs:'按课结',
        },
        
           week:[],
           endtime1:'',
           begintime1:'',
           endtime2:'',
           begintime2:'',
           endtime3:'',
           begintime3:'',
           endtime4:'',
           begintime4:'',
           endtime5:'',
           begintime5:'',
           endtime6:'',
           begintime6:'',
           endtime7:'',
           begintime7:'',
           endtime8:'',
           begintime8:'',
       
        // 排课
        classid:'',//插班排课班级列表id
        studentlist:[],//学生id
        qanuelist:[],//签约课程
        tercherlist:[],//助教老师
        tercherlistdo:[],//主讲老师
        tratelistdo:[],//教室
        //
        //
        labelPosition:'top',
        dialogFormVisiblebiao:false,//课表
        dialogTableVisiblegogo:false,//记录
        dialogTableVisiblelistget:false,//课表详情
        dialogFormVisible: false,
        getdialogFormVisible: false,
        dialogFormVisibleupdate:false,
        dialogFormVisiblegou:false,
        multipleSelection:[],
         numbers:{// 购课
          studentid:'',
          ordertype:'时段卡',
          beigindate:'',//签约日期
          enddate:'',//结束日期
          courseid:'',//课程ID
          coursecounts:1,//课时数
          price:50,//课程单价
          sumprice:50,//课程金额
          discounttype:'折扣',//折扣方式
          discountper:'90',//折扣
          discountprice:0,//直减
          remarks:''//备注
         }, 
         count:50, //  总金额 
         Discount:0, //已优惠
         numbershow:false,//折扣方式
         numbershowdo:true,
         booklist:[], //课程
        update:{
          id:'',
          name:'',
          tel:'',
          sex:'',
          birthday:'',
          num:'',
          remarks:''
        },
        rules: {
          name: [{
              required: true,
              message: '请输入姓名',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 5,
              message: '长度在 2 到 11 个字符',
              trigger: 'blur'
            }
          ],
          tel: [{
              required: true,
              message: '请输电话',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 11,
              message: '长度在 1 到 11 个字符',
              trigger: 'blur'
            }
          ],
          birthday: [{
              required: true,
              message: '请输日期',
              trigger: 'blur'
            },
            // { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
          ],
          num: [{
              required: true,
              message: '请输编号',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 10,
              message: '长度在 1 到 10 个字符',
              trigger: 'blur'
            }
          ],
          remarks: [{
              required: true,
              message: '请填写备注',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 10,
              message: '长度在 1 到 10 个字符',
              trigger: 'blur'
            }
          ]
        },
      }
    },
    created() {
      this.getxuenamelist()
      this.book()
      this.Dis()
      this.bnum()
      this.qanue()
      this.tercher()
      this.tercherdo()
      this.tratelist()
    },
    methods: {
      // 课表详情
      listgetlist(item){
      //  console.log(item)
      this.dialogTableVisiblelistget=true
       this.listget=item
       console.log(this.listget)
      },
      // 添加助教老师
      zhujiao(){
        this.zhujiaos=!this.zhujiaos
      },
      // 单次排课
      dan(){
        this.plshow=false
        this.xingqi=false
        this.shangke=true
       this.formnoe.addtype = "one"
       this.week='0'
      },
      // 批量排课
      pl(){
        this.plshow=true
        this.formnoe.addtype = "more"
        this.bba=true
        this.aab=false
      },
      // 按课结
      key(){
        this.shangke=true
        this.xingqi=false
        this.bba=true
        this.aab=false
      },
      //按日期
      date(){
        this.xingqi=true
        this.shangke=false
        this.bba=false
        this.aab=true
      },
      // 星期日
      sunday(){
        this.weeks.weekri=!this.weeks.weekri
      },
      // 星期一
      Monday(){
        this.weeks.weekyi=!this.weeks.weekyi
      },
      // 星期二
      Tuesday(){
        this.weeks.weeker=!this.weeks.weeker
      },
      // 星期三
      Wednesday(){
        this.weeks.weeksan=!this.weeks.weeksan
      },
      // 星期四
      Thursday(){
        this.weeks.weeksi=!this.weeks.weeksi
      },
      // 星期五
      Friday(){
        this.weeks.weekwu=!this.weeks.weekwu
      },
      // 星期六
      Saturday(){
        this.weeks.weekliu=!this.weeks.weekliu
      },

      //  购课
      courses(row){
        // console.log(row)
        this.numbers.studentid=row.id
        this.dialogFormVisiblegou=true
      },
      async butnumber(){
        const {data:res} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/students/addorder',this.numbers)
        // console.log(res)
        if(res.errCode==10000){
          this.$message.success('购课成功')
          this.dialogFormVisiblegou=false
          this.getxuenamelist()
        }
      },
      // 购课记录
     async gogo(row){
      //  console.log(row)
       let studentid=row.id
       this.dialogTableVisiblegogo=true
       const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/order/list',{params:{studentid:studentid}})
      //  console.log(res)
      this.gridData=res.data.list
      },
      //课表
     async kebiao(row){
        this.dialogFormVisiblebiao=true
        console.log(row)
        this.kebiaolist=row
        let studentid=row.id
        console.log(this.studentid)
        const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/coursetables/search?studentid='+studentid)
        console.log(res)
        if(res.errCode==10000){
            this.backlist=res.data.list
            this.loading=false
        }
      
      },
      
      //
      handleSelectionChange(val) {
        this.multipleSelection = val;
        // 获取学员id        
        this.formnoe.studentlist=val
        val.forEach(item=>{
          this.studentlist.push(item.id)
          this.formnoe.studentid=item.id
        })
        
      },
      // 添加排课
     insert(){
       if(this.multipleSelection==''){
         this.$message.error('请选择学员排课')
         return
       }else{
         this.getdialogFormVisible=true
       }
     },
      // 一对一排课
      //签约课程
      async qanue(){
          const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/courses/list')
          this.qanuelist=res.data.list
      },   
      //助教老师
      async tercher(){
        const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/teachers/list?cat=2')
        this.tercherlist=res.data.list
      },
      //主讲老师
      async tercherdo(){
        const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/teachers/list?cat=1')
        this.tercherlistdo=res.data.list
       
      },
      // 教室
      async tratelist(){
        const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/classes/list')
        this.tratelistdo=res.data.list
      },
     //  判断是否是一对一排课
     noe(activeName, oldActiveName){
      //  console.log(activeName)
       if(activeName=="first"){
           if(this.multipleSelection.length>1){
            this.$message.error('请选择一位学员')
             return false
           }    
       }
     },
    //  班级列表单选
     radios(row){
       this.classid=row.id
     },
     //插班排课
     async paike(){
       let studentlist=this.studentlist
       let classid=this.classid
       console.log(studentlist)
      const {data:res} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/coursetables/addForClassid',{params:studentlist,classid})
      // console.log(res)
      if(res.errCode==10000){
         this.$message.success('排课成功')
         this.getdialogFormVisible=false
         this.getxuenamelist()
      }else{
        this.$message.error('排课失败')
      }
     },
      // 班级列表
      async bnum(){
        const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/classes/list',{params:this.backs})
        this.datax=res.data.list
      },
      // 一对一排课
     async noenoe(){
       this.week.forEach(item=>{
         console.log(item)
         if(item==1){
            let obj={"week":1,"begintime":this.begintime1,"endtime":this.endtime1}
            this.formnoe.weektime.push(obj)
         }else if(item==2){
          let obj={"week":2,"begintime":this.begintime2,"endtime":this.endtime2}
            this.formnoe.weektime.push(obj)
         }else if(item==3){
          let obj={"week":3,"begintime":this.begintime3,"endtime":this.endtime3}
            this.formnoe.weektime.push(obj)
         }else if(item==4){
          let obj={"week":4,"begintime":this.begintime3,"endtime":this.endtime3}
            this.formnoe.weektime.push(obj)
         }else if(item==5){
          let obj={"week":5,"begintime":this.begintime3,"endtime":this.endtime3}
            this.formnoe.weektime.push(obj)
         }else if(item==6){
          let obj={"week":6,"begintime":this.begintime3,"endtime":this.endtime3}
            this.formnoe.weektime.push(obj)
         }else if(item==7){
          let obj={"week":7,"begintime":this.begintime3,"endtime":this.endtime3}
            this.formnoe.weektime.push(obj)
         }
       })
       console.log(this.formnoe)
       if(this.week==0){
         let obj={'week':0,"begintime":this.begintime8,"endtime":this.endtime8}
         this.formnoe.weektime.push(obj)
       }
       const {data:res} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/coursetables/add',this.formnoe)
      //  console.log(res)
      if(res.errCode==10000){
        this.$message.success('排课成功')
        this.getdialogFormVisible=false
        this.getxuenamelist()
      }else{
        this.$message.error('排课失败')
      }
     },

      // 课时数*课程单价
      cour(){
         let coursecounts =this.numbers.coursecounts//课时数
         let price=this.numbers.price//课程单价
         let discountprice=this.numbers.discountprice //直减
         this.numbers.sumprice=parseInt(coursecounts*price)//课程金额
        //  总价
         if(this.numbershow==false){
           this.count=parseInt(this.numbers.sumprice-discountprice)
         }else if(this.numbershowdo==false){
            this.count=parseInt(this.sumprice*this.dicountsper/100)   
         }
        //  优惠
        // if(this.numbershowdo==false){
        //    this.count=parseInt(this.numbers.sumprice-discountprice)
        //  }
      },
      // 优惠
      Dis(){
        let discountprice=this.numbers.discountprice //直减
        let discountper=this.numbers.discountper //折扣
        let sumprice=this.numbers.sumprice//课程金额
        // console.log(discountper)
        // 已优惠
        if(this.numbershow==true){
          this.Discount=discountprice
        }else if(this.numbershowdo==true){
          let a = sumprice*discountper/100
          let b = sumprice-a
          this.Discount=parseInt(b)
        }
        // 总价
        if(this.numbershow==true){
          this.count=parseInt(sumprice-discountprice)
        }else if(this.numbershowdo==true){
          this.count=parseInt(sumprice*discountper/100)
        }

      },
      // 折扣方式
      numbersb(){
        this.numbershow=true
        this.numbershowdo=false
      },
      numbersbdo(){
        this.numbershow=false
        this.numbershowdo=true
      },
      // 课程
     async book(){
       const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/courses/list')
      this.booklist=res.data.list
     },
      // 修改
      updatea(row){
        console.log(row)
        this.dialogFormVisibleupdate=true
        this.update.id=row.id
        this.tableData.forEach(item=>{
          if(row.id==item.id){
            this.update.name=item.name
           this.update.tel=item.tel
           this.update.sex=item.sex
           this.update.birthday=item.birthday
           this.update.num=item.num
           this.update.remarks=item.remarks
          }
        })
        // console.log(this.update.id)
      },
      async updatesx(){
        const {date:res} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/students/add',this.update)
        // console.log(res)
        if(res==undefined){
          this.$message.success('修改成功')
          this.dialogFormVisibleupdate=false
          this.getxuenamelist()
        }
      },
      // 分页
      handleSizeChange(val) {
        // console.log(val)
        this.queryform.psize = val
        this.getxuenamelist()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.queryform.page = val
        this.getxuenamelist()
        console.log(`当前页: ${val}`);
      },
      // 单条删除
      async deletefind(row) {
        //  console.log(row)
        const cate = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(error => {
          return error;
        });
        if (cate == 'confirm') {
          const {
            data: res
          } = await this.$http.get('http://www.eshareedu.cn/edusystems/api/students/delete?id=' + row.id)
          if (res.errCode == 10000) {
            this.$message.success('删除成功')
            this.getxuenamelist()
          }
        }
        if (cate != 'confirm') {
          this.$message.info('已取消删除')
        }
      },
      // 批量删除
      async xuenamedelete() {
        const cate = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(error => {
          return error;
        });
        // console.log(cate)
        if (cate == 'confirm') {
          let self = this
          let sid = []
          this.multipleSelection.forEach(item => {
            sid.push(item.id)
          })
          let xid = sid.join(",")
          const {
            data: res
          } = await this.$http.post('http://www.eshareedu.cn/edusystems/api/students/deleteall', {
            ids: xid
          })
          console.log(res)
          if (res.errCode == 10000) {
            self.$message.success('删除成功')
            self.getxuenamelist()
          }
        }
        if (cate != 'confirm') {
          this.$message.info('已取消删除')
        }
      },
      // 添加
      async xuenameinsert() {
        let self = this
        let data = this.additemform
        let token = window.sessionStorage.getItem('access_token')
        // console.log(token)
        const {
          data: res
        } = await this.$http.post('http://www.eshareedu.cn/edusystems/api/students/add', this.additemform, {
          headers: {
            token
          }
        })
        // console.log(res)
        if (res.errCode != '10000') {
          this.$message.error('添加失败')
        } else {
          this.$message.success('添加成功')
          this.dialogFormVisible = false,
            this.getxuenamelist()
        }
      },
      // 列表
      async getxuenamelist() {
        let self = this
        let token = window.sessionStorage.getItem('access_token')
        const {
          data: res
        } = await this.$http.get('http://www.eshareedu.cn/edusystems/api/students/searchForConsumed',{params:this.queryform})
        // console.log(res)
        if (res.errCode == '10000') {
          this.tableData = res.data.list
          // console.log(this.tableData)
          this.counts = res.data.counts
          this.queryform.name=''
        }
      },



    },
  }

</script>
<style scoped>
   /* 课表 */

   .admi:hover{
     color: rgb(172, 169, 169);
   }
   .right{
    width: 76%;
    height: 670px;
    background-color: #fff;
  }
  .trate{
    width: 100%;
    height: 58%;
    background-color: rgba(245, 245, 245, 0.979);
    margin-top: 5%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius:10px ;
  }
  .left-title{
     display: flex;
     align-items: center;
  }
  /* .left-trate{
    width: 100%;
    height: 20%;
    display: flex;
    flex-direction: column;
  } */
  /* // */
  .classes{
    display: flex;
    flex-wrap: wrap;
  }
  /* .class{
    width: 100%;
    height: 80px;
    background-color: darkgreen;
    margin-top: 5px;
    display: flex;
  } */
  .class-chali{
    /* flex: 1; */
    height: 80px;
    width: 50%;
    height: 100%;
    /* background-color: rgb(170, 167, 170); */
  }
  .header {
    width: 100%;
    display: flex;
    height: 50px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 1px 1px 3px 1px rgb(200, 226, 241);
    background-color: rgb(233, 237, 240);
    align-items: center;
  }

  .card-header {
    font-size: 16px;
    color: rgb(37, 140, 236);
  }

  .title {
    width: 100px;
    height: 100%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    /* background-color: rgb(160, 197, 240); */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    font-weight: bold;
  }

</style>
